<html lang="en">
<head>
    <title>TEST</title>

    <style>
        div {
            background-color: cornflowerblue;
            color: white;
            padding: 10px;
            margin: 10px;
            width: 50%;
            text-align: center;
        }

        .border-bottom-left {
            border-bottom-left-radius: 30px;
        }

        .border-bottom-right {
            border-bottom-right-radius: 30px;
        }

        .border-top-left {
            border-top-left-radius: 30px;
        }

        .border-top-right {
            border-top-right-radius: 30px;
        }
    </style>
</head>
<body>
<div class="border-top-left">
    <span>Border top left radius</span>
</div>
<div class="border-top-right">
    <span>Border top right radius</span>
</div>
<div class="border-bottom-left">
    <span>Border bottom left radius</span>
</div>
<div class="border-bottom-right">
    <span>Border bottom right radius</span>
</div>

</body>
</html>